<template>
  <el-container>
    <el-main>
      <el-dialog
        title="请选择"
        :visible.sync="dialogDirVisible"
        v-if="dialogDirVisible"
      >
        <dirlist :dialogDirVisible="dialogDirVisible" :key-name="keyName" @close="changeDir"></dirlist>
      </el-dialog>
      <el-row>
        <el-col :span="10" :offset="4">
          <el-form :model="taskform" size="mini" label-width="180px">
            <el-divider>数据库配置</el-divider>
            <el-form-item
              label="数据库类型"
              prop="dbtype"
              :rules="[{required:true,message:'请选择类型名称',trigger:'blur'}]"
            >
              <el-select v-model="taskform.dbtype" placeholder="请选择">
                <el-option
                  v-for="item in $public.sqltypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="SQL地址"
              prop="host" 
              :rules="[{required:true,message:'请输入主机地址',trigger:'blur'}]"
              v-if="taskform.dbtype === 'mysql' || taskform.dbtype === 'mssql' || taskform.dbtype === 'postgres'"
            >
              <el-input v-model="taskform.host"></el-input>
            </el-form-item>
            <el-form-item
              label="SQL端口"
              prop="port"
              :rules="[{required:true,message:'请输入主机端口',trigger:'blur'}]"
              v-if="taskform.dbtype === 'mysql' || taskform.dbtype === 'mssql' || taskform.dbtype === 'postgres'"
            >
              <el-input v-model="taskform.port"></el-input>
            </el-form-item>
            <el-form-item
              label="SQL用户名"
              prop="user"
              :rules="[{required:true,message:'请输入用户名',trigger:'blur'}]"
              v-if="taskform.dbtype === 'mysql' || taskform.dbtype === 'mssql' || taskform.dbtype === 'postgres'"
            >
              <el-input v-model="taskform.user"></el-input>
            </el-form-item>
            <el-form-item
              label="SQL密码"
              prop="password"
              :rules="[{required:true,message:'请输入密码',trigger:'blur'}]"
              v-if="taskform.dbtype === 'mysql' || taskform.dbtype === 'mssql' || taskform.dbtype === 'postgres'"
            >
              <el-input v-model="taskform.password" show-password></el-input>
            </el-form-item>
            <el-form-item
              label="数据库名"
              prop="dbname"
              :rules="[{required:true,message:'请输入数据库名',trigger:'blur'}]"
              v-if="taskform.dbtype === 'mysql' || taskform.dbtype === 'mssql' || taskform.dbtype === 'postgres'"
            >
              <el-input v-model="taskform.dbname"></el-input>
            </el-form-item>
            <el-form-item label="字符编码" v-if="taskform.dbtype === 'mysql'">
              <el-select v-model="taskform.char" placeholder="请选择">
                <el-option
                  v-for="item in $public.chars"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="数据库路径"
              prop="dbpath"
              :rules="[{required:true,message:'请选择数据库路径',trigger:'blur'}]"
              v-if="taskform.dbtype === 'sqlite'"
            >
              <el-input v-model="taskform.dbpath" :disabled="true">
                <el-button slot="append" icon="el-icon-search" @click="enableDirSearch('dbpath')"></el-button>
              </el-input>
            </el-form-item>
            <el-divider>任务配置</el-divider>
            <el-form-item
              label="本地保存路径"
              prop="savepath"
              :rules="[{required:true,message: '请输入保存路径', trigger: 'blur' }]"
            >
              <el-input v-model="taskform.savepath" :disabled="true">
                <el-button slot="append" icon="el-icon-search" @click="enableDirSearch('savepath')"></el-button>
              </el-input>
            </el-form-item>
            <el-form-item label="是否加密">
              <el-switch v-model="enablezippwd"></el-switch>
            </el-form-item>
            <el-form-item label="压缩密码" v-if="enablezippwd">
              <el-input v-model="taskform.zippwd" show-password></el-input>
            </el-form-item>
            <el-form-item label="远程存储">
              <el-select v-model="taskform.rs" multiple>
                <el-option
                  v-for="item in remotestorages"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="执行频率">
              <el-select v-model="pinlv" @change="changepinlv">
                <el-option
                  v-for="item in $public.pinlvs"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="日期" v-if="pinlv === 'month'">
              <el-select v-model="day" placeholder="请选择" @change="cjobs">
                <el-option
                  v-for="item in $public.days"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="周" v-if="pinlv === 'week'">
              <el-select v-model="week" placeholder="请选择" @change="cjobs">
                <el-option
                  v-for="item in $public.weeks"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="时间点">
              <el-time-picker
                v-model="times"
                placeholder="任意时间点"
                @change="createjobs"
                value-format="H m s"
              ></el-time-picker>
            </el-form-item>
            <el-form-item
              label="计划任务"
              prop="crontab"
              :rules="[
                        { required: true, message: '请输入 计划任务', trigger: 'blur' }
                    ]"
            >
              <el-input v-model="taskform.crontab"></el-input>
            </el-form-item>
            <el-form-item label="本地备份保留数">
              <el-input-number v-model="taskform.expire" :min="1" :max="100"></el-input-number>个
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="edittask">确定</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
<script>
import Dirlist from "@/components/Dirlist.vue";

export default {
  components: { Dirlist },
  data() {
    return {
      dialogDirVisible: false,
      keyName: "",
      taskform: {
        dbtype:"mysql",
        char: "utf8",
        port: "",
        crontab: "",
        rs: [],
        pause: "no",
        expire: 1,
      },
      day: "1",
      week: "1",
      times: "",
      pinlv: "day",
      enablezippwd: false,
      remotestorages: [],
      rowid:""
    };
  },
  created() {
    this.ftpGet();
    if(this.$route.query.id){
      this.rowid = this.$route.query.id
      this.GetOneTask(this.rowid)
    }else{
      this.$message.error("获取不到id")
      this.$router.push({
        path:"/backup/sqltasklist"
      })
    }
  },
  methods: {
    changeDir(dirpath) {
      this.taskform[dirpath.name] = dirpath.value;
      this.dialogDirVisible = false;
    },
    enableDirSearch(str) {
      this.keyName = str;
      this.dialogDirVisible = true;
    },
    ftpGet() {
      this.$http.Get(this.$api.ftps, { page: 1, count: -1 }, (res) => {
        this.remotestorages = res.data;
      });
    },
    changepinlv(e) {
      this.pinlv = e;
      this.cjobs();
    },
    createjobs(e) {
      this.times = e;
      this.cjobs();
    },
    testtask() {
      this.$http.Post(this.$api.jobtest, this.taskform, () => {});
    },
    edittask() {
      this.$http.Put(
        this.$api.task + "/" + this.rowid,
        this.taskform,
        () => {
         this.$router.go(-1)
        },
        "修改任务"
      );
    },
    cjobs() {
      var arrtimes = this.times.split(" ");
      var crontabstr = "";
      if (arrtimes.length === 3) {
        crontabstr = arrtimes[2] + " " + arrtimes[1] + " " + arrtimes[0];
        if (this.pinlv === "month" && this.day) {
          crontabstr = crontabstr + " " + this.day + " * *";
        } else if (this.pinlv === "week" && this.week) {
          crontabstr = crontabstr + " * * " + this.week;
        } else {
          crontabstr = crontabstr + " * * *";
        }
      }
      this.taskform.crontab = crontabstr;
    },
    // 获取详情
    GetOneTask(id) {
      this.$http.Get(this.$api.task + "/" + id, {}, (res) => {
        this.taskform = res;
      });
    },
  },
};
</script>